<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局属性</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            background: tomato;
            /*将块状元素变成行内元素*/
            display: inline;
        }

        span{
            width: 100px;
            height: 100px;
            background: cyan;
            /*将行内元素变成块状元素*/
            display: block;
        }

        section{
            width: 350px;
            height: 450px;
            background: purple;
            /*保留块状元素的宽高属性，并且保留的行内元素的一行显示的特性*/
            display: inline-block;
        }


        /*!*使用 display 设置元素隐藏*!*/
        /*.one{*/
        /*    !*将元素隐藏，并且不会占据位置*!*/
        /*    display: none;*/
        /*}*/

        /*.two{*/
        /*    !*显示 隐藏的元素*!*/
        /*    display: inline-block;*/
        /*}*/

        /*!*设置鼠标滑过时的显示*!*/
        /*.two:hover > .one{*/
        /*    display: inline-block;*/
        /*}*/


        /*使用visibility设置元素的隐藏和显示   会占据元素位置     */
        .one{
            /*隐藏元素*/
            visibility: hidden;
        }

        .two{
            /*显示元素*/
            visibility:visible;
        }

        /*鼠标滑过显示元素*/
        .two:hover>.one{
            visibility: visible;
        }



    </style>


</head>
<body>

<div>我是块状元素</div>
<span>我是行内元素</span>

<section>
    <img src="./a.webp" alt="">
    我也是块状元素
</section>
<section>
    <img src="./a.webp" alt="">
    我也是块状元素
</section>

<div class="two">
    aaa
    <section class="one">
        <img src="./o.webp" width="350" alt="">
        我也是块状元素
    </section>
</div>

<section>
    <img src="./b.webp" alt="">
    我也是块状元素我是另外一张图片
</section>
<section>
    <img src="./a.webp" alt="">
    我也是块状元素
</section>
<section>
    <img src="./a.webp" alt="">
    我也是块状元素
</section>



</body>
</html>